<script>
import { changePwd } from "@/api";

export default {
  name: 'ChangePwd',
  data() {
    const validateStrongPassword = (str) => {
      const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/
      return reg.test(str)
    }
    const validateNewPwd = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请输入密码'))
      } else if (value.trim() === this.model.oldPwd.trim()) {
        callback(new Error('新旧密码不能相同'))
      } else if (!validateStrongPassword(value.trim())) {
        callback(new Error('密码至少 8 位，需包含数字、英文字母、特殊符号（~!@#$%^&*）'))
      } else {
        callback()
      }
    }
    const validateCheckPass = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请输入密码'))
      } else if (value.trim() !== this.model.newPwd.trim()) {
        callback(new Error('请重新确认密码'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      model: {
        oldPwd: "",
        newPwd: "",
        checkPwd: "",
      },
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validateNewPwd, trigger: "blur" }],
        checkPwd: [{ required: true, validator: validateCheckPass, trigger: "blur" }],
      },
    }
  },
  methods: {
    openChangePwd() {
      this.dialogFormVisible = true;
    },
    closeChangePwd() {
      this.$refs.changePwdForm.resetFields();
      this.dialogFormVisible = false;
    },
    handleAddSubmit() {
      return this.$refs.changePwdForm.validate()
        .then(() => {
          return changePwd(this.model)
        })
        .then(() => {
          this.$message({
            message: "修改成功",
            type: "success",
            center: true,
            duration: 2000,
          });
          this.$router.push({ name: "login" });
          // this.$router.push({ name: `${process.env.VUE_APP_FOLDER_NAME}Login` });
        })
        .finally(() => {
          this.disabled = false;
        })
        .catch(err => console.log(err));
    }
  },
  render() {
    const listeners = {
      'update:visible': val => {
        this.dialogFormVisible = val
      }
    }
    return <c-dialog
      title="修改密码"
      class="modify-pwd-dialog"
      visible={this.dialogFormVisible}
      {
        ...{
          on: listeners
        }
      }
      append-to-body={false}
      closeOnClickModal={false}
      on-close={this.closeChangePwd}
      center={true}
    >
      <c-form
        props-model={this.model}
        rules={this.rules}
        ref="changePwdForm"
        label-position="right"
      >
        <c-form-item label="旧密码" prop="oldPwd">
          <c-input
            type="password"
            show-password
            v-model={this.model.oldPwd}
            placeholder="请输入原密码"
            auto-complete="off"
            ref="oldPwd"
          ></c-input>
        </c-form-item>
        <c-form-item label="新密码" prop="newPwd">
          <c-input
            type="password"
            show-password
            v-model={this.model.newPwd}
            placeholder="密码至少 8 位，需包含数字、英文字母、特殊符号（~!@#$%^&*）"
            auto-complete="off"
          ></c-input>
        </c-form-item>
        <c-form-item label="确认密码" prop="checkPwd">
          <c-input
            type="password"
            show-password
            v-model={this.model.checkPwd}
            placeholder="再次输入新密码"
            auto-complete="off"
          ></c-input>
        </c-form-item>
        <c-form-item>
          <div class="dialog-footer">
            <c-button
              type="primary"
              on-click={this.handleAddSubmit}
              disabled={this.disabled}
            >
              确 定
            </c-button>
            <c-button on-click={this.closeChangePwd}>
              取 消
            </c-button>
          </div>
        </c-form-item>
      </c-form>
    </c-dialog>
  }
}
</script>

<style lang="scss">
.modify-pwd-dialog {
  width: 650px !important;
  margin: 0 auto;
  .el-dialog {
    width: inherit;
    .el-form-item__label {
      width: 100px;
    }
    .el-input {
      width: 460px;
    }
    .el-form-item__error {
      margin-left: 100px;
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>